<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">{{message}}
    </div>
    <script>
        // 数据
        var data = {
            message:"数据1"
        }

        var APPEle = document.querySelector('#app')
        var str = APPEle.innerHTML;
        var reg = /\{\{([^{}]+)\}\}/;
        if(reg.test(str)){
            var $1 = RegExp.$1;
            var message = data[$1]
            APPEle.innerHTML = APPEle.innerHTML.replace(reg,message)
        }
        
        // 2.0 二次渲染
        // 数据观察
        var val = data['message'];
        Object.defineProperty(data,"message",{
            get:function(){
                return val;
            },
            set:function(newval){
                // 监听到数据改变 ，获取最新的数据 ，把旧的数据替换掉
                var old = message;
                // replace 把旧数据替换为新数据
                APPEle.innerHTML = APPEle.innerHTML.replace(old,newval)
                if(val != newval){
                    val = newval
                }
            },
            configurable:true,
            enumerable:true
        })
        // 修改数据
        data.message = '数据2'
        console.log(data);
    </script>
</body>
</html>